<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bfc</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <!-- 修成BFC的条件
     1、浮动元素，float 除 none 以外的值
     2、定位元素，position（absolute，fixed）
     3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
     4、overflow 除了 visible 以外的值（hidden，auto，scroll） -->

    特性一：内部的Box（块级元素）会在垂直方向上一个接一个的放置
    <style>
        .fl {
            float: left;
            width: 100px;
            height: 100px;
            background: #ccc;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <div class="clearfix">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
    特性二：常规文档流中，兄弟盒子，下边距和上边距，谁大取谁
    <style>
        .container {
            border: 1px solid red;
        }

        .box1 {
            height: 20px;
            margin: 10px 0;
            border: 1px solid gold;
        }

        .box2 {
            height: 20px;
            margin: 20px 0;
            border: 1px solid blue;
        }

        .wrapper {
            overflow: hidden;
        }
    </style>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- 特性二：解决方案-> 新开一个BFC容器，将其中的一个隔离出来，这样内部的子元素就不会影响外部元素了 -->
        <!-- <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div> -->
    </div>
    特性三：不被浮动的元素覆盖剩余屏幕
    <style>
        .column:nth-of-type(1) {
            float: left;
            height: 100px;
            width: 300px;
            border: 1px solid black;
        }

        .column:nth-of-type(2) {
            height: 100px;
            border: 1px solid blue;
        }
    </style>
    <div class="clearfix">
        <div class="column"></div>
        <div class="column"></div>
    </div>
    特性四：BFC包含浮动的块（利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准文档流的父盒子的height）
    <style>
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        p {
            background-color: green;
            /*防止环绕*/
            /* overflow: hidden; */
        }
    </style>
    <div>
        <div class="left"></div>
        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
            你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
            你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        </p>
    </div>
</body>

</html>
<script>

</script>